<template>
  <div class="Info">
    <el-container>
      <el-header style="width:60%;margin-top: 30px;">
        <el-select v-model="value1" multiple placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>

        <el-select
            v-model="value2"
            multiple
            collapse-tags
            style="margin-left: 10px;"
            placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" style="margin-left: 50px">搜索</el-button>
      </el-header>
      <div style="height: 1px"></div>
      <el-main style="width:70%;margin: 0 auto;margin-top:20px;height:100%;margin-right:250px">
        <el-table
            :data="tableData"
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="workerNum"
              label="员工工号"
              width="200">
          </el-table-column>
          <el-table-column
              prop="workerName"
              label="员工姓名"
              width="200">
          </el-table-column>
          <el-table-column
              prop="workerGender"
              label="性别"
              width="200">
          </el-table-column>
          <el-table-column
              prop="workerState"
              label="状态"
              width="200">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="150">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="1000">
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Info",
  methods: {
    handleClick(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },

  data() {
    return {
      tableData: [{
        workerNum: '1',
        workerName: '王小虎',
        workerGender: '男',
        workerState: '在职',
      }, {
        workerNum: '2',
        workerName: '王小虎',
        workerGender: '男',
        workerState: '在职',
      }, {
        workerNum: '3',
        workerName: '王小虎',
        workerGender: '男',
        workerState: '在职',
      }, {
        workerNum: '4',
        workerName: '王小虎',
        workerGender: '男',
        workerState: '在职',
      }],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  }
}
</script>

<style scoped>

</style>